<template>
  <div id="app" class="app">
    <h1>{{ msg }}，学生姓名：{{ stuName }}</h1>
    <!--  通过父组件给子组件传递函数类型的props实现：子给父传递函数 -->
    <school :getSchoolName="getSchoolName"></school>
    <!--  通过父组件给子组件绑定一个自定义事件实现：子给父传递函数 （第一种写法 使用@或v-on）-->
    <student @studentName="getStudentName" @click.native="show"></student>
    <!--  通过父组件给子组件绑定一个自定义事件实现：子给父传递函数 （第二种写法（vue3不适用） 使用ref）-->
    <!-- <student ref="stu"></student> -->
    
  </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'
    export default {
        name:'App',
        components:{School, Student},
        data(){
          return{
            msg: '你好啊',
            stuName:""
          }
        },
        methods:{
          getSchoolName(name){
              console.log("收到School名字：",name)
          },
          getStudentName(name){
            console.log("收到Student名字：",name)
            this.stuName =  name;
          },
          show(){
            alert(123)
          }
        },
        //vue3没有$on方法
        // mounted(){
        //   this.$refs.stu.$on('studentName', this.getStudentName)
        // }

    }
</script>
<style scoped>
  .app{
    background-color: gray;
  }
</style>
